<template>
  <view class="content">
    <view class="amount">
      <view class="amount_left">现金钱包余额：</view>
      <view class="amount_right">¥{{ cash_balance }}</view>
    </view>

    <view class="price">
      <text>转账金额</text>
      <view class="price_input">
        <text>￥</text>
        <input
          v-model="input_price"
          type="number"
          placeholder="输入转账金额"
          style="flex: 1"
        />
      </view>
    </view>

    <view class="phone">
      <view class="phone_input">
        <input
          v-model="input_phone"
          type="number"
          placeholder="请输入收款人手机号"
        />
      </view>
    </view>

    <view class="fixed">
      <view class="fixed_button" @click="handleTransfer">确定转账</view>
    </view>

    <u-popup
      v-model="show_transaction"
      mode="center"
      width="490rpx"
      height="290rpx"
      :border-radius="24"
      :closeable="true"
      :mask-close-able="false"
      @close="operation_password = ''"
    >
      <view class="Transaction_eject">
        <text class="Transaction_top">输入交易密码</text>
        <input
          type="password"
          value=""
          class="Transaction_center"
          v-model="operation_password"
        />
        <text class="Transaction_bottom" @click="transactionComfirm">确定</text>
      </view>
    </u-popup>
  </view>
</template>

<script>
import api from "../../api/api";
import tip from "@/utils/tip.js";
export default {
  data() {
    return {
      input_price: "",
      input_phone: "",
      shopDetail: {},
      show_transaction: false,
      operation_password: "",
    };
  },
  computed: {
    cash_balance() {
      if (this.shopDetail.balance && this.shopDetail.lock_balance) {
        return (
          Number(this.shopDetail.balance) - Number(this.shopDetail.lock_balance)
        ).toFixed(2);
      } else {
        return 0;
      }
    },
  },
  onShow() {
    this.getuserWallet();
  },
  methods: {
    async getuserWallet() {
      let res = await api.userWallet({
        method: "get",
        query: {},
        loading: "加载中",
      });

      if (res.code === 0) {
        this.shopDetail = res.data;
      } else {
        tip.defaults(res.msg);
      }
    },

    transactionComfirm() {
      if (this.operation_password == "") {
        tip.defaults("请输入交易密码");
      } else {
        this.handleTransfer();
      }
    },

    async handleTransfer() {
      if (!this.input_price) {
        tip.defaults("请输入转账金额");
        return;
      }

      if (this.input_price > Number(this.cash_balance)) {
        tip.defaults("转账金额不能大于钱包余额");
        return;
      }

      if (!/^1[3456789]\d{9}$/.test(this.input_phone)) {
        tip.defaults("请填写正确手机号");
        return;
      }

      if (!this.operation_password) {
        this.show_transaction = true;
        return;
      }

      this.show_transaction = false;

      let res = await api.walletTransfer({
        query: {
          type: 1, //1现金 2零钱
          price: this.input_price,
          account: this.input_phone,
          operation_password: this.operation_password,
        },
        method: "post",
      });

      this.show_transaction = false;
      this.operation_password = "";
      if (res.code == 0) {
        tip.defaults("转账成功");
        setTimeout(() => {
          this.getuserWallet();
        }, 1000);
      } else {
        tip.defaults(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  padding: 20rpx 30rpx 100rpx 30rpx;
  background: $bg-color1;

  //   min-height: 100vh;
  min-height: calc(100vh - 44px);
}
.amount {
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 690rpx;
  height: 104rpx;

  background-image: url("/static/transfer_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  &_left {
    height: 44rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 44rpx;
  }
  &_right {
    height: 50rpx;
    font-size: 36rpx;
    font-weight: 600;
    color: #ffffff;
    line-height: 42rpx;
  }
}
.price {
  margin-top: 30rpx;
  width: 100%;
  background: $bg-color3;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text {
    margin: 30rpx;
    color: $text-color1;
  }
  text:first-child {
    font-size: 16px;
  }
  text:nth-child(2) {
    font-size: 12px;
  }
  .price_input {
    height: 100rpx;
    display: flex;
    align-content: flex-start;
    input {
      height: 120rpx;
      line-height: 120rpx;
      color: $text-color1;
    }
    // border-bottom: 2rpx solid #313535;
    text {
      font-size: 22px;
      font-weight: 500;
    }
  }
}
.phone {
  margin-top: 30rpx;
  padding: 0 30rpx;
  width: 100%;
  background: $bg-color3;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .phone_input {
    height: 100rpx;
    display: flex;
    align-content: flex-start;
    input {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      color: $text-color1;
    }
    text {
      font-size: 22px;
      font-weight: 500;
    }
  }
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  width: 750rpx;
  height: 130rpx;
  background: #292b2b;
  &_button {
    width: 670rpx;
    height: 90rpx;
    margin: 20rpx auto 0;
    background: $button;
    background-repeat: no-repeat;
    background-size: 100%;

    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 90rpx;
    text-align: center;
  }
}
.Transaction_eject {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 290rpx;
  background-color: $bg-color1;
  .Transaction_top {
    margin-top: 50rpx;
    font-size: 32rpx;
    color: $text-color1;
  }
  .Transaction_center {
    padding: 0 20rpx;
    border: 2rpx solid #262934;
    background: $bg-color3;
    border-radius: 16rpx;
    height: 85rpx;
    width: 80%;
    color: #ffffff;
  }
  .Transaction_bottom {
    font-size: 32rpx;
    color: $text-color1;
    margin-bottom: 30rpx;
  }
}
</style>